<template>
  <div class="home">
    <Ditem v-for="product in products" v-bind:key = "product.slogan" v-bind:height="fullHeight"  v-bind:width="fullWidth" v-bind:stitle="product.stitle" :slogan="product.slogan" :introduction="product.introduction" :routerName="product.routerName" :img="product.img"/>
  </div>
</template>

<script>
// @ is an alias to /src
import Ditem from "@/components/Ditem.vue";

export default {
  name: "home",
  components: {
    Ditem
  },
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      homeImgNavClass: {
        width: "60%",
        color: "red",
        fontSize: "13px"
      },
      products: [
        {
          img: [
            {
              src: "http://pcera22ot.bkt.clouddn.com/howto21.png",
              title: "",
              height: 180,
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/HOWTO20.png" ,
              title: "1",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto19.png" ,
              title: "1-1",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto18.jpg" ,
              title: "1-2",
              br: true
            }
          ],
          slogan: "颢豆生日纪念CD",
          introduction:
            "从15岁开始，我就会在生日时设计礼品送给好友。18岁开始，每年我会整理和当年记忆关联的一些歌，刻录成CD，配上伴手礼送给朋友。HOWTOX21灵感来自正反同色中性灰与12月21，21岁生日的循环；X20灵感来自陷入黑白怎么调都调不好的彩色——“涂色未遂”;X19来自对黑白关系的思考;X18的老唱片则是对过去十八年记忆的封存。",
          routerName: "lala"
        },
        {
          img: [
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_28days.png" ,
              title: "",
              height: 300
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_21days.jpg" ,
              title: "4"
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_14days.png" ,
              title: "5"
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_7days.png" ,
              title: "6"
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_9.png" ,
              title: "7",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_21.png" ,
              title: "8",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_14.jpg" ,
              title: "9",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_7.png" ,
              title: "10",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_8.png" ,
              title: "11",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/218.png" ,
              title: "11-1",
            },
            {
              // src:  "http://pcera22ot.bkt.clouddn.com/218.png" ,
              title: "12",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/20_丝带.jpg" ,
              title: "13",
              row: true
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21丝带.png" ,
              title: "14",
              row: true
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_3.jpg" ,
              title: "11-1-1",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_4.jpg" ,
              title: "11-1-2",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_5.jpg" ,
              title: "11-1-3",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_6.jpg" ,
              title: "11-1-4",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_7.jpg" ,
              title: "11-1-5",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_8.jpg" ,
              title: "11-1-6",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_9.jpg" ,
              title: "11-1-7",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_10.jpg" ,
              title: "11-1-8",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_11.jpg" ,
              title: "11-1-9",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_1.png" ,
              title: "11-1-10",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/21_2.jpg" ,
              title: "11-1-11",
            }
          ],
          slogan: ''
        },
        {
          img: [
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_jinian.jpg" ,
              title: "    ",
              height: 260
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_zaijian.jpg" ,
              title: "11-1-14",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_birth.jpg" ,
              title: "11-1-18",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_gounian.gif.gif" ,
              title: "11-1-15",
              br: true
            }
          ],
          slogan: "颢豆赠礼",
          introduction:
            "在好友生日，新年，或者离别的时候，我会赠送设计的卡片和伴手礼。",
          routerName: "lala"
        },
        {
          img: [
            {
              src:  "http://pcera22ot.bkt.clouddn.com/japan背面.jpg" ,
              title: "       ",
              height: 260
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/japan正面.jpg" ,
              title: "11-1-14-1-a",
            }
          ],
          slogan: ''
        },
        {
          img: [
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_jin1.jpg" ,
              title: "    ",
              height: 260
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_jin2.jpg" ,
              title: "11-1-14-1",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/howto_jin3.png" ,
              title: "11-1-18-2-1",
            }
          ],
          slogan: ''
        },
        {
          img: [
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm1.jpg" ,
              title: "                            ",
              height: 300,
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm2.png" ,
              title: "1-1-1-1-12q",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm4.jpg" ,
              title: "1-2-dasd",
              br: true
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm5.jpg" ,
              title: "1-2-dafdsfssd"
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm3.jpg" ,
              title: "1-1-as",
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm6.jpg" ,
              title: "1-2-dafsdfssd",
              br: true
            },
            {
              src:  "http://pcera22ot.bkt.clouddn.com/mxm7.jpg" ,
              title: "1-2-da-fssd",
              br: true
            }
          ],
          slogan: "颢豆艺术家联名系列",
          introduction:
            "和风格迥异的艺术家创作联名平面作品。",
          routerName: "lala"
        }
      ]
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.fullHeight = window.fullHeight;
        that.fullWidth = window.fullWidth;
      })();
    };
  },
  watch: {
    //监听窗口高度
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  }
};
</script>
<style>
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item {
  margin-top: 10%;
}
</style>